<template>
  <!-- 问题 列表数据出来慢 不能点击阅读 不然没有数据 -->
  <div class="bookdetails">
    <div class="catalogueMulu" v-show="okMulu">
      <div class="backcate" @click="isMulu">
        <img src="../assets/xy.png" alt="" class="img1" />
        <div class="names">{{ BookDetails.title }}</div>
      </div>
      <div class="Title">
        <div class="titleName">目录</div>
        <div class="numOrder">
          <span class="num">共{{ sectionList.length }}章</span>
          <span class="order">倒序</span>
        </div>
        <div class="juan">
          <span>正文卷</span>
        </div>
      </div>
      <div class="section">
        <ul>
          <li
            v-for="(item, index) in sectionList"
            :key="index"
            @click="btnchapters(index)"
          >
            <span>{{ item.title }}</span
            ><span></span>
          </li>
        </ul>
      </div>
    </div>
    <div class="content" v-show="okCon">
      <div class="topbookmsg">
        <div class="back">
          <router-link to="/">
            <img src="../assets/xy.png" alt="" class="img1" />
            <div class="names">{{ BookDetails.title }}</div>
          </router-link>
        </div>
        <div class="bookMsg">
          <div class="bookleft">
            <img
              :src="'http://statics.zhuishushenqi.com' + BookDetails.cover"
              alt=""
            />
          </div>
          <div class="bookright">
            <div class="bookname">{{ BookDetails.title }}</div>
            <div class="author">{{ BookDetails.author }}</div>
            <div class="score">
              {{ BookDetailsRat.score }}评分/{{ BookDetailsRat.count }}评过
            </div>
            <div class="booktype">
              {{ BookDetails.majorCate }} |<span
                v-for="(item, index) in BookDetails.tags"
                :key="index"
                >{{ item }}</span
              >
            </div>
            <div class="booknum">
              {{ BookDetails.retentionRatio }}万字 |
              {{ BookDetailsRat.isEffect ? "完本" : "连载中" }}
            </div>
          </div>
        </div>
        <Loading v-if="!sectionList.length"></Loading>
        <div class="bookRead" v-show="sectionList.length">
          <div class="read">
            <router-link
              :to="{
                name: 'BookContent',
                query: {
                  id: id,
                  dataList: sectionList,
                  index: chapterIndex,
                  title: BookDetails.title,
                  cover: BookDetails.cover,
                  isRead: 'true',
                  text: shchiText,
                },
              }"
              >{{ isJUXU == true ? "继续阅读" : "开始阅读" }}</router-link
            >
          </div>
          <div class="rack" @click="addRack">加入书架</div>
          <div class="sub">VIP订阅</div>
        </div>
      </div>
      <div class="mask">
        <img
          :src="'http://statics.zhuishushenqi.com' + BookDetails.cover"
          alt=""
        />
      </div>
      <div class="download">
        <div class="downapp">下载APP</div>
        <div class="freepel">新人免费阅读,天天领福利</div>
      </div>
      <div class="bookContent">
        <div class="content">
          {{ BookDetails.longIntro }}
        </div>
      </div>
      <div class="catalogue">
        <div class="cataleft">
          <span class="mulu" @click="btnMulu"> 目录 </span>
          <!-- <span class="section">共{{ BookDetails.chaptersCount }}章</span> -->
        </div>
        <div class="cataright">
          <span class="booktime">{{ BookDetails.lastChapter }}</span>
        </div>
      </div>
      <div class="jiange"></div>
      <div class="xgRecommend">
        <div class="title">相关推荐</div>
        <div class="newAll" v-for="(item, index) in xgBook" :key="index">
          <div class="newItem" @click="shuax(item._id)">
            <router-link :to="`/bookDetails/${item._id}`">
              <div class="itemleft">
                <img
                  :src="'http://statics.zhuishushenqi.com' + item.cover"
                  alt=""
                />
              </div>
              <div class="itemright">
                <div class="itemname">{{ item.title }}</div>
                <div class="synopsis">
                  {{ item.shortIntro }}
                </div>
                <div class="bom">
                  <div class="bom_left">
                    <img src="../assets/zz.png" alt="" />
                    <div class="author">{{ item.author }}</div>
                    <!-- 言归正传 -->
                  </div>
                  <div class="bom_right">
                    <span class="type">{{ item.majorCate }}</span>
                    <span class="isOk">{{
                      item.isSerial ? "连载中" : "完结"
                    }}</span>
                    <span class="textNum">{{ item.retentionRatio }}万字</span>
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Loading from "../components/Loading";
export default {
  components: {
    Loading,
  },
  props: {
    id: {
      id: String,
    },
  },
  data() {
    return {
      BookDetails: [],
      BookDetailsRat: {},
      xgBook: [],
      catalogueList: [],
      okMulu: false,
      okCon: true,
      sectionList: [],
      isAdd: true,
      chapterIndex: 0,
      shchiText: "",
      isJUXU: false,
    };
  },
  created() {
    console.log(this.chapterIndex);
    this.$axios.get(`/book-info/${this.id}`).then((d) => {
      console.log(d);
      console.log(this.id);
      console.log(d.data._id);
      this.BookDetails = d.data;
      this.BookDetailsRat = d.data.rating;
      this.$axios.get(`/recommend/${d.data._id}`).then((data) => {
        console.log(data);
        this.xgBook = data.data.books;
      });
      // 书籍源
      this.$axios
        .get(`/book-sources?view=summary&book=${d.data._id}`)
        .then((d) => {
          console.log(d);
          // 章节列表
          this.$axios.get(`/book-chapters/${d.data[0]._id}`).then((d) => {
            console.log(d);
            this.sectionList = d.data.chapters;
            console.log(this.sectionList);
            console.log(this.sectionList[0].title);
            this.shchiText = this.sectionList[0].title;
          });
        });
    });
    this.isJUXUFun();
  },

  methods: {
    isJUXUFun() {
      let racklist = localStorage.getItem("RackList");
      if (racklist) {
        let arr = JSON.parse(racklist);
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].id == this.id && arr[i].isRead == "true") {
            this.isJUXU = true;
            console.log(this.isJUXU);
            return false;
          } else {
            this.isJUXU = false;
          }
        }

        console.log(this.isJUXU);
      }
    },
    shuax(e) {
      console.log(e);
      this.$axios.get(`book-info/${e}`).then((d) => {
        this.BookDetails = d.data;
        this.BookDetailsRat = d.data.rating;
      });
      this.isJUXUFun();
    },
    btnMulu() {
      this.okMulu = true;
      this.okCon = false;
    },
    isMulu() {
      this.okMulu = false;
      this.okCon = true;
    },
    btnchapters(index) {
      console.log("章节的索引值" + index);
      this.chapterIndex = index;
      this.$router.push({
        path: "/bookContent",
        query: {
          id: this.id,
          index: index,
          dataList: this.sectionList,
          title: this.BookDetails.title,
          cover: this.BookDetails.cover,
          isRead: "false",
          text: this.sectionList[index].title,
        },
      });
      // 点击目录的时候进入读书内容 然后加入已阅读
      this.btnYuduMulu();
    },
    // 点击阅读和点击目录的
    btnYuduMulu() {
      // console.log(this.id);
      let AllId = {
        id: this.id,
        cover: this.BookDetails.cover,
        title: this.BookDetails.title,
        isRead: "true",
        listIndex: this.chapterIndex,
        text: this.sectionList[this.chapterIndex].title,
      };
      let racklist = localStorage.getItem("RackList");
      if (racklist) {
        // console.log(racklist);
        let arr = JSON.parse(racklist);
        // console.log(arr);
        let _this = this;

        // 判断存储内有没有这本书
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id == AllId.id) {
            console.log("有这本书了");
            _this.isAdd = false;
            arr[i].listIndex = _this.chapterIndex;
            localStorage.setItem("RackList", JSON.stringify(arr));
            return false;
          } else {
            console.log("没有这本书");
            _this.isAdd = true;
          }
        }

        if (this.isAdd) {
          arr.push(AllId);
          localStorage.setItem("RackList", JSON.stringify(arr));
        } else {
          localStorage.setItem("RackList", JSON.stringify(arr));
        }
      } else {
        let item = [];
        item.push(AllId);
        localStorage.setItem("RackList", JSON.stringify(item));
      }
    },

    addRack() {
      // console.log(this.id);
      let AllId = {
        id: this.id,
        cover: this.BookDetails.cover,
        title: this.BookDetails.title,
        isRead: "false",
        listIndex: this.chapterIndex,
        text: this.sectionList[this.chapterIndex].title,
      };
      let racklist = localStorage.getItem("RackList");
      if (racklist) {
        // console.log(racklist);
        let arr = JSON.parse(racklist);
        // console.log(arr);
        let _this = this;
        // 判断存储内有没有这本书
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].id == AllId.id) {
            console.log("有这本书了");
            _this.isAdd = false;
            return false;
          } else {
            console.log("没有这本书");
            _this.isAdd = true;
          }
        }

        if (this.isAdd) {
          arr.push(AllId);
          localStorage.setItem("RackList", JSON.stringify(arr));
        } else {
          localStorage.setItem("RackList", JSON.stringify(arr));
        }
      } else {
        let item = [];
        item.push(AllId);
        localStorage.setItem("RackList", JSON.stringify(item));
      }
    },
  },
};
</script>
<style lang="less" scoped>
.load {
  position: absolute;
  left: 48vw;
  top: 48vh;
}

// 目录样式
.catalogueMulu {
  .backcate {
    margin: 4vw 4vw 6vw 4vw;

    display: flex;
    img {
      width: 6vw;
      height: 6vw;
    }
    .names {
      flex: 1;
      color: rgb(51, 55, 61);
      font-size: 14px;
      text-align: center;
    }
  }
  .Title {
    .titleName {
      text-align: center;
      font-size: 14px;
      color: rgb(237, 66, 75);
      padding-bottom: 4vw;
      border-bottom: 1px solid rgb(237, 66, 75);
    }
    .numOrder {
      margin: 4vw;
      display: flex;
      justify-content: space-between;
      .num {
        font-size: 15px;
        font-weight: bold;
      }
      .order {
        font-size: 14px;
        color: rgb(51, 55, 61);
      }
    }
    .juan {
      background: rgb(246, 247, 249);
      padding: 4vw 0 2vw 0;
      span {
        font-size: 13px;
        padding-left: 4vw;
        color: rgb(150, 155, 163);
      }
    }
  }
  .section {
    margin: 0vw 4vw 4vw 4vw;
    li {
      padding: 4vw 0vw;
      border-bottom: 1px solid rgb(244, 245, 246);
      span {
        font-size: 14px;
        color: rgb(51, 55, 61);
        &:nth-child(2) {
          padding-left: 2vw;
        }
      }
    }
  }
}

// 内容样式
.back {
  margin: 4vw 4vw 6vw 4vw;
  a {
    display: flex;
    img {
      width: 6vw;
      height: 6vw;
    }
    .names {
      color: rgb(51, 55, 61);
      font-size: 14px;
      padding-left: 3vw;
      display: flex;
      align-items: center;
    }
  }
}
.bookMsg {
  margin: 4vw;
  display: flex;
  .bookleft {
    img {
      width: 25vw;
      height: 30vw;
    }
  }
  .bookright {
    margin-left: 2vw;
    .bookname {
      margin-top: 0.5vw;
      font-size: 20px;
      font-weight: bold;
    }
    .author {
      margin-top: 0.5vw;
      font-size: 14px;
      color: rgb(51, 55, 61);
      &::after {
        content: "大神";
        display: inline-block;
        color: #fff;
        background: rgb(237, 66, 75);
        font-size: 2px;
        border-radius: 2px;
        margin-left: 1vw;
      }
    }
    .score {
      margin-top: 0.5vw;
      font-size: 14px;
      color: rgb(150, 155, 163);
    }
    .booktype {
      margin-top: 0.5vw;
      font-size: 14px;
      color: rgb(51, 55, 61);
      span {
        font-size: 12px;
        display: inline-block;
        padding: 0vw 1vw;
        margin-left: 1vw;
        background: rgb(245, 245, 245);
        border-radius: 4px;
      }
    }
    .booknum {
      margin-top: 0.5vw;
      font-size: 14px;
      color: rgb(51, 55, 61);
    }
  }
}
.bookRead {
  display: flex;
  margin: 0vw 4vw;
  justify-content: space-between;
  div {
    color: rgb(51, 55, 61);
    background: #fff;
    height: 8vw;
    line-height: 8vw;
    width: 26vw;
    text-align: center;
    border-radius: 2px;
    font-size: 15px;
    a {
      color: black;
    }
  }
}
.mask {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 40vw;
  filter: blur(50vw);
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
  img {
    width: 100%;
    height: 100%;
  }
}
.download {
  margin: 4vw;
  width: 92vw;
  color: #fff;
  text-align: center;
  background: rgb(237, 66, 75);
  .downapp {
    font-size: 16px;
    padding: 1vw 0vw;
  }
  .freepel {
    font-size: 12px;
    padding: 1vw 0vw;
  }
}
.bookContent {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 4vw;
  padding: 2vw 0vw;
  .content {
    display: -webkit-box;
    overflow: hidden;
    // text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 14px;
    line-height: 7vw;
  }
}
.catalogue {
  margin: 0vw 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cataleft {
    .mulu {
      font-size: 17px;
      font-weight: bold;
    }
    .section {
      font-size: 14px;
      color: rgb(150, 155, 163);
      padding-left: 1vw;
    }
  }
  .cataright {
    font-size: 14px;
    color: rgb(150, 155, 163);
  }
}
.jiange {
  margin-top: 4vw;
  width: 100%;
  height: 2vw;
  background: #e8e8e8;
}
.xgRecommend {
  margin: 4vw;
  .title {
    font-size: 17px;
    font-weight: bold;
  }
  .newAll {
    .newItem {
      border-bottom: 1px solid rgb(240, 241, 242);
      padding: 4vw 0vw 4vw 0vw;
      a {
        display: flex;

        .itemleft {
          img {
            width: 22vw;
            height: 28vw;
          }
        }
        .itemright {
          margin-left: 1vw;
          .itemname {
            font-weight: bold;
            font-size: 18px;
            color: black;
          }
          .synopsis {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            color: rgb(164, 155, 163);
            font-size: 14px;
            margin: 3vw 0vw;
          }
          .bom {
            display: flex;
            justify-content: space-between;
            .bom_left {
              img {
                width: 4vw;
                height: 4vw;
                vertical-align: middle;
              }
              .author {
                display: inline-block;
                color: rgb(164, 155, 163);
                font-size: 14px;
              }
            }
            .bom_right {
              .type {
                font-size: 12px;
                color: rgb(145, 150, 158);
                border: 1px solid rgb(226, 228, 230);
                margin-right: 1vw;
              }
              .isOk {
                font-size: 12px;
                color: rgb(237, 66, 75);
                border: 1px solid rgb(250, 203, 206);
                margin-right: 1vw;
              }
              .textNum {
                font-size: 12px;
                color: rgb(66, 132, 237);
                border: 1px solid rgb(203, 222, 250);
              }
            }
          }
        }
      }
    }
  }
}
</style>